<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags" %>
<div class="navbar navbar-inverse navbar-static-top">
	<div class="navbar-inner black-gradient">
			<a class="brand">
				<spring:message code="text_project_name" text="Pomodoro" />
			</a>
			<ul class="nav">
				<!-- <li>
					<p class="navbar-text">
						<spring:message code="text_home" text="Home" />
					</p>
				</li> -->
			</ul>
			<sec:authorize access="isAuthenticated()">
				<p class="navbar-text pull-right">
					<spring:message code="text_welcomeback" text="Welcome back" />:
					<a href="#">
						<sec:authentication property="principal.user.username" />
					</a>
					&nbsp;&nbsp;&nbsp;
					<a href="<%=request.getContextPath()%>/processlogout">
						<spring:message code="text_logout" text="Logout" />
					</a>
				</p>
			</sec:authorize>
			<sec:authorize access="isAnonymous()">
				<div class="pull-right">
					<button data-target="#signinModal" class="btn btn-mini btn-inverse nav-btn" data-toggle="modal">
						<spring:message code="text_signin" text="Sign in" />
					</button>
					<button data-target="#signupModal" class="btn btn-mini btn-inverse nav-btn" data-toggle="modal">
						<spring:message code="text_signup" text="Sign up" />
					</button>
				</div>		
    		</sec:authorize>
	</div>
</div>
<sec:authorize access="isAnonymous()">
<div id="signinModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="signinModalLabel" aria-hidden="true">
	<div class="modal-header">
    	<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    	<h3 id="signinModalLabel">
    		<spring:message code="text_signin" text="Sign in" />				    	
    	</h3>
  	</div>
	<div class="modal-body">
		<form id="loginForm" class="form-horizontal" action="<%=request.getContextPath()%>/processlogin" method="post">
  			<div class="control-group">
				<label class="control-label" for="signinInputEmail">
					<spring:message code="text_emailaddress" text="Email Address" />
				</label>
				<div class="controls">
					<input type="text" id="signinInputEmail" name="email"
  							placeholder="<spring:message code="text_emailaddress" text="Email address" />">
  					<span class="help-block validation-failed"></span>
				</div>
			</div>
  			<div class="control-group">
				<label class="control-label" for="signinInputPassword">
					<spring:message code="text_password" text="Password" />
				</label>
				<div class="controls">
					<input type="password" id="signinInputPassword" name="password"
						placeholder="<spring:message code="text_password" text="Password" />">
					<span class="help-block validation-failed"></span>
				</div>
			</div>	
			<div class="control-group">
				<div class="controls">
					<div style="margin-bottom: 20px;">
       					<input id="signinRememberme" type="checkbox" name="rememberme" value="true" style="margin-top:0;">
       					<spring:message code="text_rememberme" text="Remember me" />
        			</div>
		  			<button class="btn btn-success" type="submit">
						<spring:message code="text_signin" text="Sign in" />
					</button>
				</div>
			</div>
  		 </form>
    </div>
  	<div class="modal-footer"></div>
</div>
<div id="signupModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="signupModalLabel" aria-hidden="true">
	<div class="modal-header">
    	<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    	<h3 id="signupModalLabel">
    		<spring:message code="text_signup" text="Sign up" />				    	
    	</h3>
  	</div>
	<div class="modal-body">
		<form id="signupForm" class="form-horizontal" action="<%=request.getContextPath()%>/pages/signup" method="post">						
			<div class="control-group">
				<label class="control-label" for="signupInputEmail">
					<spring:message code="text_emailaddress" text="Email Address" />
				</label>
				<div class="controls">
					<input type="text" id="signupInputEmail" name="email"
						placeholder="<spring:message code="text_emailaddress" text="Email Address" />">
					<span class="help-block validation-failed"></span>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label" for="signupInputUsername">
					<spring:message code="text_username" text="Username" />
				</label>
				<div class="controls">
					<input type="text" id="signupInputUsername" name="username" 
						placeholder="<spring:message code="text_username" text="Username" />">
					<span class="help-block validation-failed"></span>						
				</div>
			</div>
			<div class="control-group">
				<label class="control-label" for="signupInputPassword">
					<spring:message code="text_password" text="Password" />
				</label>
				<div class="controls">
					<input type="password" id="signupInputPassword" name="password" 
						placeholder="<spring:message code="text_password" text="Password" />">
					<span class="help-block validation-failed"></span>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label" for="signupInputConfirmPassword">
					<spring:message code="text_confirmpassword" text="Confirm Password" />
				</label>
				<div class="controls">
					<input type="password" id="signupInputConfirmPassword" name="confirmPassword" 
						placeholder="<spring:message code="text_confirmpassword" text="Confirm Password" />">
					<span class="help-block validation-failed"></span>
				</div>
			</div>
			<button class="btn btn-large btn-success" type="submit">
				<spring:message code="text_createaccount" text="Create Account" />
			</button>
		</form>													
    </div>
	<div class="modal-footer"></div>
</div>
<script>
var required = '<spring:message code="message_fieldrequired" text="This field is required." />';
var email = '<spring:message code="message_entervalidemailaddress" text="Please enter a valid email address." />';
var passwordMatch = '<spring:message code="message_confirmpasswordnotmatch" text="Password not match." />';
var loginFormValidator = $('#loginForm').validate({
	rules: {
		email: {
			required: true,
			email: true
		},
		password: {
			required: true
		}
	},
	messages: {
		email: {
			email: email,
			required: required
		},
		password: {
			required: required
		}
	}
});
var signupFormValidator = $('#signupForm').validate({
	rules: {
		email: {
			required: true,
			email: true
		},
		username: {
			required: true
		},
		password: {
			required: true
		},
		confirmPassword: {			
			required: true,
			equalTo: '#signupInputPassword'
		}
	},
	messages: {
		email: {
			email: email,
			required: required
		},
		username: {
			required: required
		},
		password: {
			required: required
		},
		confirmPassword: {
			required: required,
			equalTo: passwordMatch
		}
	}
});
$('#signinModal').on('hidden', function () {
	$('#loginForm')[0].reset();
	loginFormValidator.resetForm();
	$('#loginForm .error').removeClass('error');
	$('#loginForm .validation-failed').empty();
});
$('#signupModal').on('hidden', function () {
	$('#signupForm')[0].reset();
	signupFormValidator.resetForm();
	$('#signupForm .error').removeClass('error');
	$('#signupForm .validation-failed').empty();
});
</script>
</sec:authorize>
